<template>
  <a-select
      :value="selectLocale"
      :options="languageOptions"
      :filterOption="filterOption"
      :style="styleChange"
      @change="changeLanguage"
      :size="size"
      :bordered="bordered"
      :showSearch="showSearch"
      :class="styleClass"
  >
  </a-select>
</template>

<script >
import { languageOptions } from '@/locales/langs'
import { useI18n } from 'vue-i18n'
import { computed, inject } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'QLanguageSelect',
  data () {
    return{
      languageOptions
    }
  },
  computed: {
    styleChange () {
      return { width: this.width }
    },
    styleClass () {
      if (this.styleType === 'white') {
        return 'q-language-select-white'
      } else if (this.styleType === 'white') {
        return 'q-language-select-white'
      } else {
        return null
      }
    }
  },
  props:{
    // 是否有边框
    bordered: {
      type: Boolean,
      required: false,
      default: true
    },
    // 选项框尺寸
    size: {
      type: String,
      required: false,
      default: 'default'
    },
    // 选项框宽度
    width: {
      type: String,
      required: false,
      default: '120px'
    },
    // 是否可搜索
    showSearch: {
      type: Boolean,
      required: false,
      default: false
    },
    // 风格样式
    styleType: {
      type: String,
      required: false,
      default: 'black'
    }
  },
  setup(props, context) {
    const store = useStore()
    const { locale, t } = useI18n();
    const reload = inject('reload')

    let selectLocale = computed(() => store.getters.getLanguage)

    //通过local.value切换
    const changeLanguage = (val) => {
      // 修改i18n当前的语言
      locale.value = val
      reload()
      // 修改vuex中存储的语言选中值
      store.dispatch('changeLanguage', val)
      // 抛出一个modify方法
      context.emit('modify', val)
    };

    /**
     * 搜索过滤器
     */

    const filterOption = (input, option) => {
      return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };


    return {
      selectLocale,
      changeLanguage,
      filterOption

    };
  },
}
</script>

<style lang="less" scoped>
  .q-language-select-white {
    color: #FFFFFFA6;
    :deep(.ant-select-arrow) {
      color: #FFFFFFA6;
    }
  }
</style>
